<template>
  <div class="mainPage">
    <SearchInput />
    <div class="container">
      <div v-for="item in iconList" :key="item.id" class="iconItem">
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SearchInput from "./SearchInput.vue";

const iconList = [
  {
    id: 1,
    name: "搜索",
    icon: "Search",
  },
  {
    id: 2,
    name: "搜索",
    icon: "Search",
  },
  {
    id: 3,
    name: "搜索",
    icon: "Search",
  },
  {
    id: 4,
    name: "搜索",
    icon: "Search",
  },
  {
    id: 5,
    name: "搜索",
    icon: "Search",
  },
  {
    id: 6,
    name: "搜索",
    icon: "Search",
  },
];
</script>

<style scoped lang="scss">
.mainPage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-input {
    width: 50%;
    height: 50%;
  }

  .container {
    display: grid;
    padding-top: 40px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    height: 100%;
  }
}
</style>
